<template>
    <div class="messign">
        <el-form ref="smsLoginForm" :model="smsFormData" status-icon :rules="smsRules" label-width="120px"
            class="demo-smsFormData">

            <el-form-item label="手机号" prop="phone" class="phone-form">
                <div class="phone-form3">
                    <el-input v-model="smsFormData.phone" maxlength="11" class="phone-form1" />
                    <div class="phone-form2">
                        <span @click="sendSms">{{ desc }}</span>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="验证码" prop="phoneCaptcha" class="phoneCaptcha-form-item">
                <el-input v-model="smsFormData.phoneCaptcha" maxlength="5" type="text" autocomplete="off" />
            </el-form-item>
            <el-form-item class="buttom-form">
                <el-button type="primary" @click="submitForm(smsLoginForm)" class="button1">提交</el-button>
            </el-form-item>
        </el-form>
    </div>

</template>
<script setup>
import { reactive, ref, onUnmounted } from 'vue'
// 引入校验函数
import { smsRules, useSubmitForm } from "../../composition/login/vaildate"

// 引入发送请求的方法
import * as api from "../../api/users"



// 表单校验成功之后，回调的方法
let vaildateSucess = () => {
    console.log('校验成功');
}
// 表单校验失败之后，回调的方法
let vaildateFailed = () => {
    console.log('校验失败');
}
// 使用SubmitForm
let submitForm = useSubmitForm(vaildateSucess, vaildateFailed)
const smsLoginForm = ref()
// 注入到表单的数据
const smsFormData = reactive({
    phone: '',
    phoneCaptcha: '',

})

// 短信登入流程
// 1.输入手机号，点击发送按钮，获取短信验证码
// 2.输入短信验证码，进行登入验证
// 声明一个响应式变量，改变按钮中的文字
let desc = ref('点击发送验证码')
// 引用定时器，便于组件卸载的时候清除定时器
let timeDownInterval = null
// 处理用户频繁点击的问题，应用开关的思维 
let isCilck = false //初始值用户未点击
let sendSms = async() => {
    if (!isCilck) {//true
        // 调用倒计时函数
        timeDownInterval = timeDown(2, desc, '秒后重新发送', desc.value,()=>{
            // 让点击状态isClick恢复到点击
            isCilck = false
        })
        // 发送请求
        try{
            let res = await api.getSmsCode(smsFormData.phone)
            console.log(res);
        }catch(e){
            console.log(e);
        }
    }
    isCilck = true//标记已经被点击了
}
// 短信倒计时的方法
/**
 * 
 * @param {Number} timer 倒计时的时间
 * @param {Object} param 需要变更的响应式变量
 * @param {String} msg 倒计时描述的文字
 * @param {String} endMsg 倒计时结束之后回显的值
 * @param {Function} cb 倒计时结束之后回调的函数
 */
let timeDown = (timer = 5, param, msg, endMsg,cb) => {
    // 实现思路，间隔定时器
    let count = timer
    param.value = (count + "").padStart(2, 0) + msg//一调用倒计时函数就显示倒计时的秒数
    let interval = setInterval(() => {
        count--
        // console.log(count);
        if (count <= 0) {
            clearInterval(interval)
            // 倒计时结束
            param.value = endMsg
            // 回调传入的函数
            cb && cb() 
            return
        }
        param.value = (count + "").padStart(2, 0) + msg
    }, 1000)
    // 返回定时器的引用
    return interval
}
// 调用组件卸载的钩子
onUnmounted(() => {
    // 卸载定时器
    console.log('组件被卸载了');
    if (timeDownInterval) clearInterval(timeDownInterval)//如果定时器存在，组件卸载时就也需要清除定时器
})
</script>
<style lang="less" scoped>
.username-form-item,
.phoneCaptcha-form-item {
    .el-input {
        width: 300px !important;
        height: 45px;
    }
}

.phone-form {
    .phone-form2 {
        width: 160px !important;
        background-color: white;
        border-radius: 0 3px 3px 0;
        text-align: center;
        margin-top: 5px;
    }

    .phone-form3 {
        background-color: white;
        border-radius: 3px 3px 3px 3px;
        display: flex;

        .phone-form1 {
            width: 140px !important;
            height: 45px;

            :deep(.el-input__wrapper) {
                box-shadow: none;
            }
        }

        .phone-form2 {
            cursor: pointer;
        }
    }

}

.button1 {
    width: 300px;
}
</style>